<template>
  <div class="msg_container">
    <div class="title">
      <i class="el-icon-s-comment" style="font-size:20px;margin-right:5px;"></i>
      <span>消息列表</span>
      <i class="el-icon-loading" v-if="isLoad"></i>
    </div>
    <el-divider></el-divider>
    <div class="msg_list" v-for="item in msgList" :key="item._id">
      <!-- <router-link tag="a" :to="{path:'/usercenter/msgRoom',query:{name:item.name[0]}}"> -->
      <div class="a" @click="openMsgDialog(item.name)">
        <el-avatar :src="item.imgUrl" style="width:40px;height:40px;margin-left:15px;"></el-avatar>
        <div class="center">
          <div class="name">{{item.name[0]}}</div>
          <div class="msg">{{item.news}}</div>
        </div>
        <el-badge :is-dot="item.isread===0?true:false" class="item"></el-badge>
        <div class="date">{{item.date}}</div>
        <!-- </router-link> -->
      </div>
      <div>
        <i class="el-icon-close close" @click="deleteRoom(item._id)"></i>
      </div>
    </div>
    <h2 style="margin:10px auto;" v-if="!isLoad&&!this.msgList.length">暂无消息</h2>
    <el-dialog
      :visible.sync="msgDialog"
      :title="'与'+msgName+'的对话'"
      width="50%"
      top="15px"
      @close="closeDialog()"
      @open="openDialog()"
      class="add_dialog"
    >
      <!--内容主体-->
      <msgRoom :msgName="msgName" v-if="isShowMsgRoom"></msgRoom>
    </el-dialog>
  </div>
</template>
<script>
import msgRoom from './msgRoom.vue'
export default {
  props: ['msgIsRead'],
  components: {
    msgRoom
  },
  data() {
    return {
      msgList: [],
      isLoad: true, // 加载是否完成
      msgName: '', // 传给对话框的姓名
      msgDialog: false, // 消息对话框
      isShowMsgRoom: false, // 主动销毁消息组件
      noReadCount: 0
    }
  },
  created() {
    // if (!this.username) {
    this.username = window.sessionStorage.getItem('login')
    // }
  },
  methods: {
    // 查询私信列表
    async getupRoom() {
      const findRes = await this.$http.post('/getupRoom', {
        name: { $in: [this.username] }
      })
      var data = findRes.data
      await this.comm.spliceArr(data, this.username) // 删除自己的姓名
      if (findRes.meta.status !== 200) {
        return this.$Message.error('私信列表请求失败')
      }
      return data.reverse()

      // console.log(this.msgList)
    },
    // 删除空间
    async deleteRoom(id) {
      const res = await this.$http.delete('/deleteRoom/' + id)
      if (res.meta.status !== 200) {
        return this.$Message.error('删除失败')
      }
      this.$Message.success('删除成功')
      this.comm.ArrSplice(this.msgList, '_id', id)
    },
    // 打开消息对话框
    openMsgDialog(name) {
      this.msgDialog = true
      this.msgName = name[0]
      this.msgList.forEach(item => {
        if (item.name === name) {
          item.isread = false
          this.noReadCount -= 1
        }
      })
    },
    // 打开对话框
    openDialog() {
      this.isShowMsgRoom = true
    },
    // 关闭对话框
    closeDialog() {
      this.isShowMsgRoom = false
    }
  },
  mounted() {
    // 从别人 个人中心 发私信 进入
    var taName = this.$route.params.name
    console.log(taName)
    if (taName) {
      this.msgDialog = true
      this.msgName = taName
    }

    // 自行进入
    this.getupRoom().then(data => {
      console.log(data)
      if (!data.length) {
        this.isLoad = false
        this.msgList = []
        return
      }
      data.forEach(item => {
        var length = item.msg.length
        if (length) {
          item.news = item.msg[length - 1].content
          if (this.msgIsRead) {
            var a = item.msg.findIndex(msgs => {
              return !msgs.isread && msgs.name !== this.username
            })
            if (a !== -1) {
              item.isread = 0
              this.noReadCount += 1
            }
          }
        }
        this.isLoad = false
        console.log('a')
        this.msgList.push(item)
      })
    })
  },
  watch: {
    noReadCount: function(val, oval) {
      if (!val && oval) {
        console.log('没有未读消息了')
        // 此时表示没有新消息了
        // 修改通知里的isread为1
        this.comm.noticeRead(this.username, 0, 'msg', 'msg', 1, this)
        this.$emit('msgToCenter', val)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.msg_container {
  height: 90%;
  display: flex;
  flex-direction: column;
  h2 {
    align-items: center;
  }
}
.title {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.msg_list {
  display: flex;
  border-bottom: 1px solid #f4f4f5;
  width: 100%;
  height: 60px;
  .close {
    color: #999;
    cursor: pointer;
  }
  .close:hover {
    color: red;
  }
  .a {
    display: flex;
    width: 100%;
    padding-top: 10px;
    .center {
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      .name {
        margin: 5px 0;
        font-size: 14px;
      }
      .msg {
        font-size: 12px;
        color: #999;
      }
    }
    .date {
      margin-left: auto;
      margin-right: 10px;
      font-size: 12px;
      color: #999;
    }
  }
  .el-button {
    margin-top: 25px;
  }
}
.msg_list:hover {
  background-color: #f4f4f5;
}
.el-divider--horizontal {
  margin: 10px 0 0 0;
}
</style>
